<template>
  <u-popup :custom-style="{ maxHeight: '1000rpx', overflow: 'auto' }" :show="show" @close="close">
    <view>
      <view class="code-flex-col section_4">
        <view class="code-flex-col group">
          <u-sticky bgColor="#fff">
            <u-tabs :list="list" class="group_11" @change="tabsChange"></u-tabs>
          </u-sticky>
        </view>

        <view v-show="activeIndex === 0" class="code-flex-col mt-23">
          <view class="code-flex-row code-items-center code-self-stretch group">
            <view class="section_6"></view>
            <text class="code-ml-6 font_2">限购规则</text>
          </view>
          <text class="code-self-start font_3 text_4">
            每笔订单最多购买{{ activityDetails.activityServeBo.buyAccountInfo }}张、每每个账号最多购买{{
              activityDetails.activityServeBo.buyAccountMax
            }}次
          </text>
          <view class="code-flex-row code-items-center code-self-stretch group view">
            <view class="section_6"></view>
            <text class="font_2 text_5 ml-5">退票/换票规则</text>
          </view>
          <view class="code-flex-col code-self-stretch group_3">
            <text class="font_4 text_6">本项目支持{{ activityDetails.actServe }}</text>
            <view class="code-flex-col">
              <view class="code-flex-col code-items-start group_4">
                <text class="font_4">{{ activityDetails.activityServeBo.buyQutNotInfo }}</text>
              </view>
              <view class="code-flex-col group_5">
                <view class="code-flex-col">
                  <view class="code-flex-row code-items-center code-self-stretch">
                    <view class="section_6"></view>
                    <text class="font_2 text_7 ml-5">入场规则</text>
                  </view>
                  <text class="code-self-start font_3 text_8 mt-9">
                    {{ activityDetails.activityServeBo.buyEnterInfo }}
                  </text>
                </view>
                <view class="code-flex-col mt-21">
                  <view class="code-flex-row code-items-center code-self-stretch">
                    <view class="section_6"></view>
                    <text class="font_2 text_9 ml-5">禁止携带物品</text>
                  </view>
                  <text class="code-self-start font_3 text_10">
                    {{ activityDetails.activityServeBo.seeErrorGoods }}
                  </text>
                  <view class="code-flex-row code-items-center code-self-stretch group_6">
                    <view class="section_6"></view>
                    <text class="font_5 ml-5">实名制购票规则</text>
                  </view>
                  <view class="code-flex-col code-items-start code-self-stretch group_7">
                    <text class="font_4">{{ activityDetails.activityServeBo.buyIdentityInfo }}</text>
                  </view>
                  <view class="code-flex-row code-items-center code-self-stretch group_8">
                    <view class="section_6"></view>
                    <text class="font_5 ml-5">异常排单说明</text>
                  </view>
                  <view class="code-flex-col code-self-stretch group_9">
                    <text class="code-self-stretch font_4">
                      {{ activityDetails.activityServeBo.buyErrorPaperInfo }}
                    </text>
                  </view>
                </view>
                <view class="code-flex-col mt-21">
                  <view class="code-flex-row code-items-center">
                    <view class="section_6"></view>
                    <text class="font_2 ml-5">温馨提示</text>
                  </view>
                  <view class="code-mt-8 code-flex-col code-items-start">
                    <text class="font_4 text_12">{{ activityDetails.activityServeBo.buyTipsInfo }}</text>
                  </view>
                </view>
                <view class="code-flex-col mt-21">
                  <view class="code-flex-row code-items-center">
                    <view class="section_6"></view>
                    <text class="font_2 ml-5">其他说明</text>
                  </view>
                  <view class="code-mt-8 code-flex-col code-items-start">
                    <text class="font_4 text_12">{{ activityDetails.activityServeBo.otherInfo }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-show="activeIndex === 1" class="code-flex-col mt-23">
          <view class="code-flex-row code-items-center code-self-stretch group">
            <view class="section_6"></view>
            <text class="code-ml-6 font_2">演出时长</text>
          </view>
          <text class="code-self-start font_3 text_4">
            约{{ activityDetails.activityServeBo.seeMinute }}分钟（以现场为主）
          </text>
          <view class="code-flex-row code-items-center code-self-stretch group view">
            <view class="section_6"></view>
            <text class="font_2 text_5 ml-5">最低演出曲目</text>
          </view>
          <view class="code-flex-col code-self-stretch group_3">
            <text class="font_4 text_6">最低演出曲目{{ activityDetails.activityServeBo.seeNum }}首（以现场为主）</text>
            <view class="code-flex-col">
              <view class="code-flex-col group_5">
                <view class="code-flex-col">
                  <view class="code-flex-row code-items-center code-self-stretch">
                    <view class="section_6"></view>
                    <text class="font_2 text_7 ml-5">最低演出时长</text>
                  </view>
                  <text class="code-self-start font_3 text_8 mt-9">
                    约{{ activityDetails.activityServeBo.seeLeastMinute }}分钟（以现场为主）
                  </text>
                </view>
                <view class="code-flex-col mt-21">
                  <view class="code-flex-row code-items-center code-self-stretch">
                    <view class="section_6"></view>
                    <text class="font_2 text_9 ml-5">主要演员</text>
                  </view>
                  <text class="code-self-start font_3 text_10">{{ activityDetails.activityServeBo.seeActor }}</text>
                  <view class="code-flex-row code-items-center code-self-stretch group_6">
                    <view class="section_6"></view>
                    <text class="font_5 ml-5">禁止携带物品</text>
                  </view>
                  <view class="code-flex-col code-items-start code-self-stretch group_7">
                    <text class="font_4">{{ activityDetails.activityServeBo.seeErrorGoods }}</text>
                  </view>
                  <view class="code-flex-row code-items-center code-self-stretch group_8">
                    <view class="section_6"></view>
                    <text class="font_5 ml-5">寄存说明</text>
                  </view>
                  <view class="code-flex-col code-self-stretch group_9">
                    <text class="code-self-stretch font_4">
                      {{ activityDetails.activityServeBo.seeDepositInfo }}
                    </text>
                  </view>
                </view>
                <view class="code-flex-col mt-21">
                  <view class="code-flex-row code-items-center">
                    <view class="section_6"></view>
                    <text class="font_2 ml-5">其他说明</text>
                  </view>
                  <view class="code-mt-8 code-flex-col code-items-start">
                    <text class="font_4 text_12">{{ activityDetails.activityServeBo.seeOtherInfo }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script lang="ts" setup>
defineProps({
  show: {
    type: Boolean,
    default: false
  },
  activityDetails: {
    type: Object,
    default: () => ({
      bactivityServeBo: {},
      activitySessionBoList: []
    })
  }
});
const emits = defineEmits(['update:show']);

const list = [
  {
    name: '购票须知'
  },
  {
    name: '观演须知'
  }
];

const activeIndex = ref(0);
// tabs切换
const tabsChange = (value) => {
  console.log(value);
  activeIndex.value = value.index;
};
const close = () => {
  emits('update:show', false);
};
</script>

<style lang="scss" scoped>
.mt-23 {
  margin-top: 46rpx;
}

.mt-9 {
  margin-top: 18rpx;
}

.mt-21 {
  margin-top: 42rpx;
}

.ml-5 {
  margin-left: 10rpx;
}

.mt-3 {
  margin-top: 6rpx;
}

.section_4 {
  padding-top: 47.08rpx;
  background-color: #ffffff;
  border-radius: 8rpx 8rpx 0rpx 0rpx;

  .group {
    padding: 0 40rpx;

    .group_11 {
      align-self: stretch;
    }

    .section_5 {
      background-color: #0064ff;
      border-radius: 8rpx;
      width: 128rpx;
      height: 8rpx;
    }

    .text_5 {
      line-height: 25.84rpx;
    }
  }

  .font_3 {
    font-size: 24rpx;
    font-weight: 300;
    color: #696975;
  }

  .text_4 {
    margin-left: 41.04rpx;
    margin-top: 17.82rpx;
  }

  .view {
    margin-top: 43.92rpx;
  }

  .group_3 {
    margin-top: 15.92rpx;

    .font_4 {
      font-size: 24rpx;
      font-weight: 300;
      color: #696975;
    }

    .text_6 {
      margin-left: 40.96rpx;
    }

    .group_4 {
      padding: 5.5rpx 34.76rpx 5.5rpx 40.98rpx;
    }

    .group_5 {
      padding: 35.98rpx 9.34rpx 0 40rpx;

      .text_7 {
        line-height: 25.6rpx;
      }

      .text_8 {
        line-height: 23.42rpx;
      }

      .text_9 {
        line-height: 26.1rpx;
      }

      .text_10 {
        margin-top: 17.9rpx;
      }

      .group_6 {
        margin-top: 43.78rpx;
      }

      .group_7 {
        margin-top: 15.96rpx;

        .text_1 {
          margin-left: 2.7rpx;
        }
      }

      .group_8 {
        margin-top: 40.88rpx;
      }

      .font_5 {
        font-size: 28rpx;
        font-family: PingFang;
        line-height: 25.98rpx;
        font-weight: 800;
        color: #171726;
      }

      .group_9 {
        margin-top: 15.8rpx;
      }

      .text_12 {
        margin-left: 2.82rpx;
      }

      .text_13 {
        margin-left: 2.24rpx;
      }

      .text_11 {
        line-height: 14rpx;
      }
    }
  }

  .section_6 {
    background-color: #e2e2eb;
    border-radius: 50%;
    width: 8rpx;
    height: 8rpx;
  }

  .font_2 {
    font-size: 28rpx;
    font-family: PingFang;
    line-height: 25.78rpx;
    font-weight: 800;
    color: #171726;
  }
}
</style>
